<template>
	<!-- 订单记录 -->
	<view class="page themeBga">
		<uv-tabs :list="listTabs" lineColor="#75301e" lineWidth="50" :current="current" @click="onTabsList"></uv-tabs>
		<scroll-view scroll-y class="pd20 scrollView">
			<view>
				<view class="everyBox themeMask pd20 mb20 border12" @click="goUrl('/pagesMy/linkWifi/linkWifi')">
					<view class="merchant flex justifyBetween alignCenter borderBtm">
						<view class="flexColumn">
							<text class="mb10">商家名称</text>
							<text class="fz20 gray">下单时间：2024-05-20 13：14</text>
						</view>
						<view class="detailsBtn btnSolid border12 pd1020">查看详情</view>
					</view>
					<view class="flex fz24 mt16">
						WI-FI名称：阿巴吧-5G
					</view>
				</view>
				<view class="everyBox themeMask pd20 mb20 border12">
					<view class="merchant flex justifyBetween alignCenter borderBtm">
						<view class="flexColumn">
							<text class="mb10">商家名称</text>
							<text class="fz20 gray">下单时间：2024-05-20 13：14</text>
						</view>
						<view class="detailsBtn btnSolid border12 pd1020">查看详情</view>
					</view>
					<view class="flex fz24 mt16">
						<view class="flexColumn mr50">
							<view class="mb10">就餐人数：4人</view>
							<view>商家是否确认：是</view>
						</view>
						<view class="flexColumn">
							<view class="mb10">预计到店时间：2024-05-20 13：14</view>
							<view>是否到店：是</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	// tabs切换
	const current = ref(0)
	const listTabs = [{
			id: 1,
			name: '预约记录'
		},
		{
			id: 2,
			name: 'WIFI连接记录'
		},
		{
			id: 3,
			name: '排队记录'
		}
	]
	// 切换
	const onTabsList = (index) => {
		// current.value = index;
		// switch () {
		// 	case value 0:
		// 		console.log('预约记录')
		// 		break;
		// 	case value 1:
		// 		console.log('WIFI连接记录')
		// 		break;
		// 	default:
		// 		break;
		// }
	}
	//  跳转
	const goUrl = (url) => {
		uni.navigateTo({
			url,
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;

		.scrollView {
			height: 100%;
			overflow: hidden;
			flex: 1;
		}
	}
</style>